body {
  background: #dcf5ff;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Nunito', sans-serif;
}

.container {
  width: 30%;
  background: #fff;
  border-radius: 10px;
}

.container .inner {
  background: #07daa5;
  padding: 1em;
  border-radius: 10px;
  width: calc(100% - 2em);
  clip-path: inset(0% 0% 0% 0%);
  transition: all .5s ease-in-out;
  cursor: pointer;
}

.container .inner:hover span {
  color: rgba(255, 255, 255, 0);
}

.container .inner h1 {
  color: #fff;
  margin: 0;
}

.container .inner p {
  color: #fff;
  font-size: .8rem;
}

.container:hover .inner {
  clip-path: inset(0% 50% 0% 0%);
  background: #00b6ff;
}
